<template>
  <div class="app-container">
    <!--工具栏-->
    <div class="head-container">
      <div v-if="crud.props.searchToggle">
        <!-- 搜索 -->
        <label class="el-form-item-label">类型</label>
        <el-input
          v-model="query.type"
          clearable
          placeholder="类型"
          style="width: 185px"
          class="filter-item"
          @keyup.enter.native="crud.toQuery"
        />
        <label class="el-form-item-label">权限名称</label>
        <el-input
          v-model="query.title"
          clearable
          placeholder="权限名称"
          style="width: 185px"
          class="filter-item"
          @keyup.enter.native="crud.toQuery"
        />
        <rrOperation :crud="crud" />
      </div>
      <!--如果想在工具栏加入更多按钮，可以使用插槽方式， slot = 'left' or 'right'-->
      <crudOperation :permission="permission" />
      <!--表单组件-->
      <el-dialog
        :close-on-click-modal="false"
        :before-close="crud.cancelCU"
        :visible.sync="crud.status.cu > 0"
        :title="crud.status.title"
        width="500px"
      >
        <el-form
          ref="form"
          :model="form"
          :rules="rules"
          size="small"
          label-width="80px"
        >
          <el-form-item label="权限名称" prop="title">
            <el-input v-model="form.title" style="width: 370px" />
          </el-form-item>
          <el-form-item label="权限代码" prop="code">
            <el-input v-model="form.code" style="width: 370px" />
          </el-form-item>

          <el-form-item label="排序号" prop="orderRank">
            <el-input v-model="form.orderRank" style="width: 370px" />
          </el-form-item>

          <el-form-item label="类型" prop="type">
            <el-radio-group v-model="form.type">
              <el-radio
                v-for="item in dict.privilege_type"
                :key="item.id"
                :label="item.value"
                >{{ item.label }}
              </el-radio>
            </el-radio-group>
          </el-form-item>

          <el-form-item label="上级节点" prop="pid">
            <treeselect
              v-model="form.pid"
              :options="privileges"
              :load-options="loadPrivilege"
              :normalizer="normalizer"
              style="width: 370px"
              placeholder="选择上级类目"
            />
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="text" @click="crud.cancelCU">取消</el-button>
          <el-button
            :loading="crud.status.cu === 2"
            type="primary"
            @click="crud.submitCU"
            >确认</el-button
          >
        </div>
      </el-dialog>
      <!--表格渲染-->
      <el-table
        ref="table"
        v-loading="crud.loading"
        lazy
        :data="crud.data"
        :load="getPrivilegeDatas"
        :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
        row-key="id"
        @select="crud.selectChange"
        @select-all="crud.selectAllChange"
        @selection-change="crud.selectionChangeHandler"
      >
        <el-table-column type="selection" width="55" />
        <el-table-column prop="title" label="权限名称" />
        <el-table-column prop="code" label="权限代码" />
        <el-table-column prop="menuId" label="关联菜单" />
        <el-table-column prop="orderRank" label="排序号" />

        <el-table-column prop="type" label="类型">
          <template slot-scope="scope">
            <span v-if="scope.row.type == 'URL'">菜单</span>
            <span v-else>按钮</span>
          </template>
        </el-table-column>

        <el-table-column
          v-if="
            checkPer(['admin', 'system:privilege,edit', 'system:privilege,del'])
          "
          label="操作"
          width="150px"
          align="center"
        >
          <template slot-scope="scope">
            <udOperation :data="scope.row" :permission="permission" />
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>
<script>
import crudPrivilege from "@/api/system/privilege";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import { LOAD_CHILDREN_OPTIONS } from "@riophae/vue-treeselect";
import CRUD, { presenter, header, form, crud } from "@crud/crud";
import rrOperation from "@crud/RR.operation";
import crudOperation from "@crud/CRUD.operation";
import udOperation from "@crud/UD.operation";

const defaultForm = {
  id: null,
  code: null,
  enabled: true,
  menuId: null,
  orderRank: null,
  type: "URL",
  title: null,
  rebuildTime: null,
  versionNo: null,
  pid: null,
  childrenSize: 0,
  inheritLevel: 0,
};
export default {
  name: "Privilege",
  components: {
    Treeselect,
    crudOperation,
    rrOperation,
    udOperation,
  },
  mixins: [presenter(), header(), form(defaultForm), crud()],
  // 数据字典
  dicts: ["privilege_type"],
  cruds() {
    return CRUD({
      title: "权限资源表",
      url: "api/sys/privilege",
      idField: "id",
      sort: "id,desc",
      crudMethod: { ...crudPrivilege },
    });
  },
  data() {
    return {
      privileges: [],
      permission: {
        add: ["admin", "system:privilege,create"],
        edit: ["admin", "system:privilege,edit"],
        del: ["admin", "system:privilege,del"],
      },
      rules: {
        code: [
          { required: true, message: "权限代码不能为空", trigger: "blur" },
        ],
        enabled: [
          { required: true, message: "是否可用不能为空", trigger: "blur" },
        ],
        orderRank: [
          { required: true, message: "排序号不能为空", trigger: "blur" },
        ],
        type: [{ required: true, message: "类型不能为空", trigger: "blur" }],
        title: [
          { required: true, message: "权限名称不能为空", trigger: "blur" },
        ],
      },
      queryTypeOptions: [
        { key: "name", display_name: "类型" },
        { key: "type", display_name: "权限名称" },
      ],
    };
  },
  methods: {
    normalizer(node) {
      return {
        id: node.id,
        label: node.title,
        children: node.children,
      };
    },
    getPrivilegeDatas(tree, treeNode, resolve) {
      const params = { pid: tree.id };
      setTimeout(() => {
        crudPrivilege.getPrivileges(params).then((res) => {
          resolve(res);
        });
      }, 100);
    },
    getAllPrivilege(id) {
      crudPrivilege.findAll(id).then((res) => {
        const children = res.map(function (obj) {
          if (!obj.leaf && !obj.children) {
            obj.children = null;
          }
          return obj;
        });
        this.privileges = [{ id: 0, title: "顶级类目", children: children }];
      });
    },
    loadPrivilege({ action, parentNode, callback }) {
      if (action === LOAD_CHILDREN_OPTIONS) {
        crudPrivilege
          .getTree({ pid: parentNode.id == "0" ? null : parentNode.id })
          .then((res) => {
            parentNode.children = res.map(function (obj) {
              if (!obj.leaf) {
                obj.children = null;
              }
              return obj;
            });
            setTimeout(() => {
              callback();
            }, 100);
          });
      }
    },
    // 新增与编辑前做的操作
    [CRUD.HOOK.afterToCU](crurund, form) {
      form.enabled = `${form.enabled}`;
      this.privileges = [];
      if (form.id != null) {
        if (form.pid === null) {
          form.pid = 0;
        }
        this.getAllPrivilege(form.id);
      } else {
        this.privileges.push({ id: 0, title: "顶级类目", children: null });
      }
    },
  },
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
::v-deep .vue-treeselect__control,
::v-deep .vue-treeselect__placeholder,
::v-deep .vue-treeselect__single-value {
  height: 30px;
  line-height: 30px;
}
</style>
<style rel="stylesheet/scss" lang="scss" scoped>
::v-deep .el-input-number .el-input__inner {
  text-align: left;
}
</style>
